
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
   <div id="app">


       <!--查询搜索-->
       <el-form :inline="true" :model="ReservationVo" class="demo-form-inline">
           <el-form-item label="名称">
               <el-input v-model="ReservationVo.name" placeholder="患者名"></el-input>
           </el-form-item>
           <el-form-item label="预约时间">
               <el-input v-model="ReservationVo.visit_time" placeholder="预约时间"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="onSubmit">查询</el-button>
           </el-form-item>
       </el-form>

       <el-table
               :data="tableData"
               border
               style="width: 100%">
           <el-table-column
                   prop="id"
                   label="编号"
                   width="50">
           </el-table-column>
           <el-table-column
                   prop="idcard"
                   label="身份证"
                   width="180">
           </el-table-column>
           <el-table-column
                   prop="name"
                   label="患者姓名">
           </el-table-column>
           <el-table-column
                   prop="sex"
                   label="性别">
           </el-table-column>
           <el-table-column
                   prop="tel"
                   label="电话">
           </el-table-column>
           <el-table-column
                   prop="visitTime"
                   label="预约时间">
           </el-table-column>
           <el-table-column
                   prop="duty.price"
                   label="价格">
           </el-table-column>
           <el-table-column
                   prop="section"
                   label="科室">
           </el-table-column>
           <el-table-column
                   prop="duty.account"
                   label="医生">
           </el-table-column>
           <el-table-column
                   prop="isvisit"
                   label="状态"
                   sortable
                   width="180">
               <template slot-scope="scope">
                   <el-tag type="danger" effect="dark" v-if="scope.row.isvisit=='0'">待处理</el-tag>
                   <el-tag type="success" effect="dark" v-if="scope.row.isvisit=='1'">已处理</el-tag>
                   <el-tag type="warning" effect="dark" v-if="scope.row.isvisit=='2'">预约已过期</el-tag>
               </template>
           </el-table-column>

           <el-table-column label="操作">
               <template slot-scope="scope">
                   <el-button type="success" @click="editEmp(scope.row)" v-if="scope.row.isvisit=='1'">查看</el-button>
                   <el-button type="danger"  @click="deleteById(scope.row)" v-if="scope.row.isvisit=='2'">删除</el-button>
                   <el-button type="warning" @click="editEmp(scope.row)" v-if="scope.row.isvisit=='0'">处理</el-button>
               </template>
           </el-table-column>
       </el-table>

       <!--分页-->
       <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-sizes="[5, 10, 15, 20]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
       </el-pagination>



       <el-dialog
               title="处理病例的信息"
               :visible.sync="dialogVisible2"
               width="80%"
       >
           <el-card class="box-card">
               <el-descriptions title="用户信息" >
                   <el-descriptions-item label="账户">{{editForm.tel}}</el-descriptions-item>
                   <el-descriptions-item label="用户姓名">{{editForm.name}}</el-descriptions-item>
                   <el-descriptions-item label="性别">{{editForm.sex}}</el-descriptions-item>
                   <el-descriptions-item label="身份证">{{editForm.idcard}}</el-descriptions-item>
                   <el-descriptions-item label="性别">{{editForm.sex}}</el-descriptions-item>
                   <el-descriptions-item label="备注">
<!--                       <el-tag size="small">{{sectionName}}</el-tag>-->
                   </el-descriptions-item>
               </el-descriptions>
           </el-card>

           <el-card class="box-card" v-if="!isFlag">
               <el-descriptions title="病例信息" >
                   <el-descriptions-item label="病情">{{visitForm.cases}}</el-descriptions-item>
                   <el-descriptions-item label="医生建议">{{visitForm.suggest}}</el-descriptions-item>
                   <el-descriptions-item label="备注">
                       <el-tag type="success" effect="dark" v-if="visitForm.status=='1'">病人来问诊</el-tag>
                       <el-tag type="danger" effect="dark" v-if="visitForm.status=='2'">病人未来问诊</el-tag>
                   </el-descriptions-item>
               </el-descriptions>
           </el-card>

           <el-form label-width="80px" :model="visit" ref="addFormRef" v-if="isFlag">
               <el-input v-model="visit.reservationId = editForm.id" type="hidden" ></el-input>
               <el-form-item label="问诊情况">
                   <el-radio-group v-model="visit.status">
                       <el-radio label="1">病人来问诊</el-radio>
                       <el-radio label="2">病人未来问诊</el-radio>
                   </el-radio-group>
               </el-form-item>
               <el-collapse v-model="activeNames" @change="handleChange">

               <el-collapse-item title="病情">
                   <el-input v-model="visit.cases" ></el-input>
               </el-collapse-item>
               <el-collapse-item title="医生建议">
                   <el-input v-model="visit.suggest" ></el-input>
               </el-collapse-item>
               </el-collapse>
           </el-form>

           <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible2 = false">取 消</el-button>
                 <el-button type="primary" @click="confirmAdd">确 定</el-button>
           </span>
       </el-dialog>
   </div>
</body>
<script>
     var app=new Vue({
          el:"#app",
          data:{
               tableData:[],
               currentPage:1,
               pageSize:5,
               total:0,
               userVo:{},
              editForm:{},
              dialogVisible01:false,
              dialogVisible1:false,
              dialogVisible2:false,
              ReservationVo:{},
              activeNames: "1",
              visit:{},
              visitForm:{},
              section:[],
              isFlag:true,
          },
          created(){
             this.initTable();
          },
          methods:{

              //删除处理已过期的预约
              deleteById(row){
                  axios.get("/reservation/deleteById?id="+row.id).then(result=>{
                      console.log(result)
                      if(result.data.code===200){
                          this.$message({
                              showClose: true,
                              message: '恭喜你，删除成功',
                              type: 'success'
                          });
                          this.currentPage=1;
                          this.initTable();
                      }

                  });
              },

              handleChange(val) {
                  console.log(val);
              },

              //添加
              editEmp(row){
                  this.dialogVisible2=true;
                  this.editForm=row;
                  this.initDisease(row.id);
              },

              confirmAdd(){
                  axios.post("/disease/addDisease",this.visit).then(result=>{
                      console.log(result)
                      if(result.data.code===200){
                          this.$message({
                              showClose: true,
                              message: '恭喜你，修改成功',
                              type: 'success'
                          });
                          this.dialogVisible2=false;
                          this.initTable();
                      }
                  });
              },

              //分页
              handleSizeChange(val) {
                  console.log(`每页 ${val} 条`);
                  this.pageSize=val;
                  this.initTable();
              },
              handleCurrentChange(val) {
                  console.log(`当前页: ${val}`);
                  this.currentPage=val
                  this.initTable();
              },

              //搜索框查询
              onSubmit(){
                  this.currentPage=1;
                  this.initTable();
              },

               initTable(){
                   axios.post("/reservation/reservationList?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.ReservationVo).then(resp=>{
                       this.tableData=resp.data.data.info.list;
                       this.section = resp.data.data.sections;
                       for(let i = 0;i<this.tableData.length;i++){
                           this.tableData[i].section = this.section[i].name;
                       }
                       this.total=resp.data.data.info.total;
                       console.log(this.tableData);
                   });
               },

              initDisease(rid){
                axios.post("/disease/selectByReservationId?reservationId="+rid).then(resp=>{
                    console.log(resp);
                    if(resp.data.code === 200){
                        this.visitForm=resp.data.data;
                        this.isFlag = false;
                    }else{
                        this.visitForm = {};this.isFlag = true;
                    }
                });
              }
          }
     })
</script>
</html>
